<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="排行榜"></NavBarVue>
		<view class="flex p-20 border-b justify-center">
			<view :class="[tab==e.key?'font-bold':'','flex px-30 flex-col items-center']" v-for="e,i in tabList" :key="i"
				@click="handleTab(e)">
				<text class="text-sm">{{e.name}}</text>
				<view class="h-6 w-40 bg-[#329EFF]" v-if="tab==e.key">
				</view>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="px-20 ranking_list_box bg-no-repeat bg-bottom">
						<view class="flex w-full">
							<view class="flex-1 flex flex-col items-center"
								:style="{marginTop:`${e.ranking==1?0:30}rpx`}" v-for="e,i in rankingList" :key="i"
								@click="onPath(e)">
								<ImageBoxVue :src="`/static/live/${e.ranking}.png`" width="60rpx" height="48rpx">
								</ImageBoxVue>
								<view class="w-[100rpx] h-[100rpx] rounded-full overflow-hidden border-solid border-2"
									style="margin-top: -8px;" :class="[classList[e.ranking-1].border]">
									<ImageBoxVue :src="e.headimg" width="100rpx" height="100rpx"></ImageBoxVue>
								</view>
								<view :class="['w-140 py-4 px-20 rounded mt-8 bg-gradient-to-r text-center',classList[e.ranking-1].bg]">
									<text class="text-white">{{e.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<!--  -->
					<view class="bg-white p-10 flex flex-wrap justify-between rounded-lg border-[#FFCE99] border-solid">
						<view class="bg-[#F4F7FA] flex p-20 items-center mb-20 rounded-lg"
							style="width: calc(50% - 10rpx)" v-for="e,i in userList" :key="i" @click="onPath(e)">
							<view class="w-[36rpx] h-[40rpx] bg-cover flex justify-center items-center"
								:style="{backgroundImage:`url(/static/live/${(i+1)<=3?('list'+(i+1)):'list'}.png)`}">
								<text class="font-bold text-white">{{i+1}}</text>
							</view>
							<view class="w-[80rpx] h-[80rpx] rounded-lg overflow-hidden mx-20">
								<ImageBoxVue :src="e.headimg"></ImageBoxVue>
							</view>
							<text class="flex-1 text-sm font-bold multiline-ellipsis">{{e.name}}</text>
						</view>
					</view>
					<!--  -->
					<view class="mt-30 flex-1 flex flex-col overflow-hidden">
						<view class="flex justify-between items-center">
							<text class="font-bold text-sm">正在直播</text>
							<!-- <ImageBoxVue src="/static/live/live_title1.png" width="132rpx" height="43rpx"></ImageBoxVue> -->
							<view class="flex justify-center items-center" @click="onList(0)">
								<text class="text-sm">更多</text>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="mt-30">
							<view class="flex flex-wrap justify-between">
								<LiveBoxVue v-for="e,i in liveData" :key="i" :val="e"></LiveBoxVue>
							</view>
						</view>
					</view>
					<!--  -->
					<view class="mt-30 flex-1 flex flex-col overflow-hidden">
						<view class="flex justify-between items-center">
							<text class="font-bold text-sm">语音单独陪伴</text>
							<!-- <ImageBoxVue src="/static/live/live_title1.png" width="132rpx" height="43rpx"></ImageBoxVue> -->
							<view class="flex justify-center items-center" @click="onList(1)">
								<text class="text-sm">更多</text>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="mt-30">
							<microphoneVue v-for="e,i in liveData1" :index="i" :key="i" :val="e"></microphoneVue>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import liveApi from '@/apis/apiList/liveApi';
	import LiveBoxVue from '../tabbar/components/live/LiveBox.vue';
	import microphoneVue from "../live/components/microphone.vue"
	const tab = ref(0)
	// 默认0,热度榜 1：问答榜 2：实力榜
	const tabList = [
		{
			key: 0,
			name: "热搜榜"
		},{
			key: 1,
			name: "问答榜"
		},{
			key: 2,
			name: "实力榜"
		}
	]
	const classList = [
		{
			border: "border-[#61AAFF]",
			bg: "from-[#61AAFF] to-[#B9D7FF]"
		}, {
			border: "border-[#FF975D]",
			bg: "from-[#FF993C] to-[#FFD6A6]"
		}, {
			border: "border-[#FF6B6B]",
			bg: "from-[#FF5D5D] to-[#FFCCCC]"
		},
	]
	// const liveData = new Array(6).fill({
	// 	src: "/static/imgs/img1.png",
	// 	name: "小花小花",
	// 	labels: ['卡牌', '星座', '心理'],
	// 	traits: ['实话实说', '温柔体贴']
	// })
	const liveData = ref([])
	const liveData1 = ref([])
	const rankingList = ref([])
	const userList = ref([
		{
			ranking: 1,
			headImg: null,
			name: "张一"
		}, {
			ranking: 2,
			headImg: null,
			name: "张二"
		}, {
			ranking: 3,
			headImg: null,
			name: "张三"
		}, {
			ranking: 3,
			headImg: null,
			name: "张四"
		}, {
			ranking: 3,
			headImg: null,
			name: "张四"
		}, {
			ranking: 3,
			headImg: null,
			name: "张四"
		},
	])
	onLoad((option) => {
		tab.value = option.key
		getTopList()
		getList()
	})
	const handleTab = (item) => {
		if (tab.value != item.key) {
			tab.value = item.key
			getTopList()
		}
	}
	const getTopList = () => {
		const opt = {
			examine: tab.value,
			page: 1,
			limit: 10
		}
		liveApi.getTheChartslist(opt).then(res => {
			res.data.map((item, idx) => {
				item.ranking = idx + 1
			})
			const data = [...res.data]
			const obj = {...res.data[1]}
			res.data.splice(1, 1)
			res.data.unshift(obj)
			rankingList.value = [res.data[0], res.data[1], res.data[2]]
			userList.value = data
		})
	}
	const getList = () => {
		liveApi.getLiveRoomlist({
			sts: "0",
			page: 1,
			limit: 2
		}).then(res => {
			liveData.value = res.data
		})
		liveApi.getAnchorlistAtexamine({
			examine: "0",
			page: 1,
			limit: 10
		}).then(res => {
			liveData1.value = res.data
		})
	}
	const onPath = (item) => {
		const id = uni.getStorageSync('user').id
		const userid = item.member.id
		if (id != userid) {
			uni.navigateTo({
				url: `/pages/user/anchor?id=${item.id}`
			})
		}
	}
	const onList = (sts) => {
		uni.navigateTo({
			url: `/pages/live/liveList?sts=${sts}`
		})
	}
	
</script>

<style>
	.ranking_list_box {
		height: 300rpx;
		background-image: url("/static/live/rankingList.png");
		background-position-y: 120rpx;
		background-size: 620rpx 256rpx;
	}
</style>